import * as React from 'react';
import {createBottomTabNavigator} from '@react-navigation/bottom-tabs';
import {NavigationContainer} from '@react-navigation/native';
import {StyleSheet, SafeAreaView} from 'react-native';
import Icon from 'react-native-vector-icons/Ionicons';
import {HomeStack} from './src/page/MainPage';
import {MyPageStack} from './src/page/MyPage';

// 3. 配置底部导航栏
const Tab = createBottomTabNavigator();

export default function App() {
  return (
    <SafeAreaView style={styles.container}>
      <NavigationContainer>
        <Tab.Navigator
          screenOptions={({route}) => ({
            headerShown: false,
            tabBarActiveTintColor: 'tomato',
            tabBarInactiveTintColor: 'gray',
            tabBarIcon: ({color, size}) => {
              let iconName;
              switch (route.name) {
                case '首页':
                  iconName = 'home';
                  break;
                case '我的':
                  iconName = 'person-outline';
                  break;
                default:
                  iconName = 'home';
              }
              return <Icon name={iconName} size={size} color={color} />;
            },
          })}>
          <Tab.Screen name="首页" component={HomeStack} />
          <Tab.Screen name="我的" component={MyPageStack} />
        </Tab.Navigator>
      </NavigationContainer>
    </SafeAreaView>
  );
}

const styles = StyleSheet.create({
  container: {flex: 1},
});
